<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识渐变</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            background: linear-gradient(to right,white,red);
        }
        .box2{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            background: radial-gradient(circle,blue,white 50%,red);
        }
    </style>
</head>
<body>
    <div>
        <p>渐变（gradients），可以在两个或多个指定颜色之间显示平稳的过渡。</p>
        <p>两种类型的渐变：</p>
        <p>1、线性渐变：向下/向上/向左/向右/对角方向。</p>
        <p>2、径向渐变：由它们的中心定义，以圆的形式向外扩散。</p>
        <p>线性渐变的两大要素：</p>
        <p>1、渐变的起始色和终止色，至少两种颜色。</p>
        <p>2、渐变方向。</p>
        <p>线性渐变语法：background: linear-gradient(渐变方向, 起始色, 终止色, ……)；渐变方向表示结束的方向。当没有设置渐变方向时，默认是从上往下渐变。</p>
        <p>径向渐变语法：background: radial-gradient(渐变形状, 起始色, 终止色, ……)；渐变形状默认是椭圆。</p>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>